<script setup>
import { recommendMusic, newMusic } from '@/api/Home'

// 1 导入ref
import { ref } from 'vue'
// 2 定义数据 并赋值 为 空数组
let reList = ref([])

async function myFn() {
  const res = await recommendMusic()
  console.log(`output->res`, res)
  // 3  把数据保存到变量中
  reList.value = res.data
}
myFn()

// 2 定义数据 并赋值 为 空数组
let songList = ref([])
async function getSongList() {
  const res = await newMusic()
  console.log(res.data)
  songList.value = res.data
}
getSongList()
</script>
<template>
  <p class="title">推荐歌单</p>
  <!-- PS：gutter: 沟壑，间隙 -->
  <van-row gutter="6">
    <!-- PS：span： 跨度，横跨 （列的宽度，占整行的几份  （默认一行24份）） -->
    <van-col span="8" v-for="obj in reList" :key="obj.id">
      <van-image width="100%" fit="cover" :src="obj.picUrl" />
      <p class="song_name">{{ obj.name }}</p>
    </van-col>
  </van-row>

  <p class="title">最新音乐</p>
  <van-cell
    center
    v-for="obj in songList"
    :key="obj.id"
    :title="obj.name"
    :label="obj.artists + '-' + obj.name"
  >
    <template #right-icon>
      <!--Icon 的 size 属性用来设置图标的尺寸大小，默认单位为 px-->
      <van-icon name="play-circle-o" />
    </template>
  </van-cell>
</template>
<style scoped>
/* 标题 */
.title {
  padding: 10px;
  margin: 10px 0;
  background-color: #eee;
  color: #333;
  font-size: 15px;
  margin-top: 46px;
  margin-bottom: 10px;
}
/* 推荐歌单 - 歌名 */
.song_name {
  font-size: 15px;
  padding: 0 06px;
  margin-bottom: 20px;
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
  -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
  -webkit-line-clamp: 2; /** 显示的行数 **/
  overflow: hidden; /** 隐藏超出的内容 **/
}

/* 给单元格设置底部边框 */
.van-cell {
  border-bottom: 1px solid lightgray;
}

.van-icon {
  font-size: 22px;
}
</style>
